<template>
  <view class="rboot">
    <head-box></head-box>
    <div class="rbs">
      <div class="rboot-ko">
        <div class="header">
          <div class="left">
            <div class="left-img">
              <div class="img">
                <image src="../../static/robot/dddd.png"></image>
              </div>
              <p>猜你想问</p>
            </div>
            <div class="left-img" @click="onRbootKf">
              <div class="img">
                <image src="../../static/robot/11.png"></image>
              </div>
              <p>人工客服</p>
            </div>
          </div>
          <div class="right">
            <div v-for="i in 3" :key="i" class="u-border-bottom">
              <p>医疗报销需要提供哪些材料？</p>
            </div>
          </div>
        </div>
        <div class="content">
          <div class="dialogue con-di">
            <div class="dialogue-item" v-for="i in 4" :key="i">
              <div class="rboot-lefts">
                <div class="ff-rboot a1">
                  <image src="../../static/robot/a.png"></image>
                  <p>
                    <span>数智群团助手为您服务，请问有什么可以帮您的吗？</span>
                  </p>
                </div>
                <div class="ff-rboot a2">
                  <p>
                    <span>医疗报销需要提供哪些材料?</span>
                  </p>
                  <image src="../../static/robot/b.png"></image>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="conditions-dialogue ts tsx vue-js list-js">
          <div class="ff-rboot-tx-left qq q163 q17173 q183 q1921 q2021">
            <image src="../../static/robot/a.png"></image>
          </div>
          <div class="ff-rboot-tx-right qq-right q17173-right">
            <p v-for="(item, index) in drbootList" :key="index" class="pp">
              {{ 1 + index }}.{{ item.name }}
            </p>
            <div class="is-solve solve">
              <p>
                <image src="../../static/robot/c0.png"></image>
                <span>已解决</span>
              </p>
              <p>
                <image src="../../static/robot/c1.png"></image>
                <span>未解决</span>
              </p>
            </div>
          </div>
        </div>
        <div class="nav">
          <scroll-view class="scroll1" scroll-x="true" scroll-with-animation>
            <view class="swipers" id="tab_list">
              <view
                id="tab_item"
                class="text"
                :data-current="index"
                :data-title="item.title"
                @click="swichNav"
                v-for="(item, index) in navList"
                :key="index"
              >
                <span class="ss"> {{ item.title }}</span>
              </view>
            </view>
          </scroll-view>
        </div>
        <div class="footer">
          <div class="fod">
            <u-input
              v-model="rbootValue"
              placeholder="请输入您想说的话…"
              border-color="#DADADA"
              placeholder-style="{width: 266rpx;font-size: 30rpx;font-family: PingFang;font-weight: 500;color: #9F9FA0;text-indent:28rpx;}"
              :custom-style="{
                width: '586rpx',
                height: '88rpx',
                background: '#FFFFFF',
                border: '1px solid #DADADA',
                borderRadius: '10rpx',
              }"
              :clearable="false"
            />
            <div class="img">
              <image src="../../static/robot/11.png" @click="onsubMit"></image>
            </div>
          </div>
        </div>
      </div>
    </div>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        options: {}, //传的参数
        rbootValue: '', //想要对机器人说的话
        //机器人给选择的列表
        drbootList: [
          { name: '个人住院时，主治医生签发的住院病历;' },
          { name: '住院所需费用的清单;' },
          { name: '住院所需费用的各种发票;' },
          { name: '医院财务开具的出院小结;' },
          { name: '主治医生开具的疾病诊断书;' },
        ],
        //更多可选择的列表
        navList: [
          { title: '公积金怎么转入1' },
          { title: '公积金怎么转入2' },
          { title: '公积金怎么转入3' },
          { title: '公积金怎么转入4' },
        ],
      }
    },
    onLoad(opt) {
      this.options = { ...opt }
    },
    onShow(){
      // #ifdef H5
      console.log('分享')
      this.$wxSetShare()
      // #endif
    },
    methods: {
      //点击tab切换
      swichNav(e) {},
      //进行搜索
      onsubMit() {
        if (!this.rbootValue.length || !this.rbootValue.trim()) {
          this.$api.msg('至少得输入点内容吧')
          return false
        }
      },
      //人工客户
      onRbootKf() {
        const { type } = this.options
        uni.navigateTo({
          url: `/pages/myHelp/myHelp?type=${type}`,
        })
      },
    },
  }
</script>

<style lang="scss" scoped>
  .rboot {
    width: 750rpx;
    background: #f3f3f3;
    .rbs {
      .rboot-ko {
        .header {
          margin: 43rpx 27rpx 59rpx 19rpx;
          width: 704rpx;
          height: 330rpx;
          background: #ffffff;
          border-radius: 30rpx;
          display: flex;
          justify-content: flex-start;

          .left {
            padding: 0 0 0 28rpx;
            .left-img {
              justify-content: center;
              display: inline-flex;
              flex-wrap: wrap;
              &:nth-child(1) {
                padding-top: 30rpx;
              }
              &:nth-child(2) {
                padding-top: 33rpx;
              }
              .img {
                width: 77rpx;
                height: 76rpx;
                background-image: url('../../static/robot/xt.png');
                background-repeat: no-repeat;
                background-size: 100% 100%;
                position: relative;
                image {
                  position: absolute;
                  left: 50%;
                  top: 50%;
                  transform: translate(-50%, -50%);
                  width: 59rpx;
                  height: 47rpx;
                }
              }
              p {
                padding-top: 13rpx;
                font-size: 30rpx;
                font-family: PingFang;
                font-weight: bold;
                color: #222222;

                background: linear-gradient(0deg, #4575fd 0%, #2251d5 100%);
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
              }
            }
          }
          .right {
            padding-top: 36rpx;
            flex: 1;
            padding-left: 50rpx;
            .u-border-bottom {
              width: 471rpx;
              p {
                white-space: nowrap;
                width: 347rpx;
                line-height: 83rpx;
                font-size: 28rpx;
                font-family: PingFang;
                font-weight: 500;
                color: #222222;
              }
            }
          }
        }
        .content {
          margin: 59rpx 27rpx 7rpx 19rpx;
          .con-di {
            .dialogue-item {
              .rboot-lefts {
                image {
                  width: 57rpx;
                  height: 60rpx;
                }
                .a1 {
                  width: 81rpx;
                  height: 81rpx;
                  border-radius: 50%;
                  position: relative;
                  background: #fff;
                  image {
                    vertical-align: middle;
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                  }
                  p {
                    margin-left: 120rpx;
                    background: #ffffff;
                    &:before {
                      content: '';
                      position: absolute;
                      right: 100%;
                      top: 50%;
                      transform: translateY(-50%);
                      border-top: 12rpx solid transparent;
                      border-right: 23rpx solid #fff;
                      border-bottom: 12rpx solid transparent;
                    }
                  }
                }
              }
              .rboot-lefts {
                p {
                  height: 69rpx;
                  white-space: nowrap;
                  border-radius: 10rpx;
                  padding: 23rpx 27rpx 13rpx 20rpx;
                  position: relative;
                  display: inline-block;
                  span {
                    font-size: 24rpx;
                    font-family: PingFang;
                    font-weight: 500;
                    height: 100%;
                    display: block;
                    white-space: nowrap;
                    line-height: 69rpx;
                  }
                }
                .a2 {
                  padding: 52rpx 0;
                  text-align: right;
                  p {
                    background: #4575fd;
                    margin-right: 40rpx;
                    &:after {
                      content: '';
                      position: absolute;
                      right: -23rpx;
                      top: 50%;
                      transform: translateY(-50%);
                      border-top: 12rpx solid transparent;
                      border-left: 23rpx solid #4575fd;
                      border-bottom: 12rpx solid transparent;
                    }
                    span {
                      color: #fff;
                    }
                  }
                }
              }
            }
          }
        }
        .conditions-dialogue {
          padding-left: 19rpx;
          padding-top: 4rpx;
          display: flex;
          justify-content: flex-start;
          .ff-rboot-tx-left {
            background: #fff;
            width: 81rpx;
            height: 81rpx;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            image {
              width: 57rpx;
              height: 60rpx;
            }
          }
          .ff-rboot-tx-right {
            background: #ffffff;
            position: relative;
            margin-left: 34rpx;
            width: 511rpx;
            &:before {
              content: '';
              position: absolute;
              right: 100%;
              top: 25rpx;
              border-top: 12rpx solid transparent;
              border-right: 23rpx solid #fff;
              border-bottom: 12rpx solid transparent;
            }
            .pp {
              width: 434rpx;
              font-size: 24rpx;
              font-family: PingFang;
              font-weight: 500;
              color: #222222;
              white-space: nowrap;
              padding-bottom: 43rpx;
              padding-left: 39rpx;
              &:first-child {
                padding-top: 27rpx;
              }
            }
            .is-solve {
              padding: 0 0 26rpx 0;
              display: flex;
              justify-content: center;
              align-items: center;
              p {
                &:first-child {
                  padding-right: 65rpx;
                }
                image {
                  width: 32rpx;
                  height: 32rpx;
                  vertical-align: middle;
                }
                span {
                  padding-left: 23rpx;
                  white-space: nowrap;
                  width: 70rpx;
                  height: 23rpx;
                  font-size: 24rpx;
                  font-family: PingFang;
                  font-weight: 500;
                  color: #666666;
                  line-height: 30rpx;
                }
              }
            }
          }
        }
        .nav {
          padding: 73rpx 0 53rpx 0;
          .swipers {
            display: flex;
            justify-content: flex-start;
            padding-bottom: 19rpx;
            .text {
              border-radius: 24upx;
              white-space: nowrap;
              width: 33.33%;
              font-size: 24rpx;
              font-family: PingFang;
              font-weight: 500;
              color: #222222;
              background: #ffffff;
              margin: 20rpx;
              padding: 13rpx 38rpx 13rpx 39rpx;
              .ss {
              }
            }
          }
        }
        .footer {
          height: 121rpx;
          background: #fafafa;

          .fod {
            display: flex;
            justify-content: space-between;
            align-content: center;
            padding: 18rpx 30rpx 15rpx 29rpx;
          }
          .img {
            margin-left: 29rpx;
            // background-image: url('../../static/robot/sss.png');
            // width: 76rpx;
            // height: 76rpx;
            // background-size: contain;
            // background-repeat: no-repeat;
            display: flex;
            justify-content: center;
            align-items: center;
            image {
             width: 76rpx;
             height: 76rpx;
            }
          }
        }
      }
    }
  }
</style>
